/**
 * Created by trisatria on 2/27/14.
 */
$(document).on('pageshow','#productimgsinglepage', function(event) {

    $.mobile.loading( "show");
    var resault = getUrlVars();
    var product_id = resault['product_id'];
    //console.log(data);
    $.ajax({
        type: 'get',
        url:  _host+'topic/detail/'+product_id
    }).done(function(data){
        var j_data = $.parseJSON(data);
        var j_topic = $.parseJSON(j_data['topic']);
        var j_images = $.parseJSON(j_data['img']);
        var j_user = $.parseJSON(j_data['user']);
        //console.log(j_images);
        var item = '<div class="item"><a href="#popupParis"  data-rel="popup" data-position-to="window" data-transition="fade" class="img_item"><img class="" src="'+_host_img+'/'+j_topic['images']+'" ></a></div>';
        $("#owl-demo").append(item);
        for(var i=0; i< j_images.length; i = parseInt(i) + 1){
            item = '<div class="item"><a data-rel="popup" data-position-to="window" data-transition="fade" class="img_item"><img class="" src="'+_host_img+'/'+j_images[i]['link']+'" ><a/></div>';
            $("#owl-demo").append(item);
        }

        $("#owl-demo").owlCarousel({

            //navigation : true, // Show next and prev buttons
            slideSpeed : 300,
            paginationSpeed : 400,
            singleItem:true,

            // "singleItem:true" is a shortcut for:
            items : 1,
            itemsDesktop : [1000,1],
            itemsDesktopSmall : [900,1],
            itemsTablet: [600,1],
            itemsMobile : [488,1]

        });
        var content = '<div data-demo-html="true">';

        content += '    <div class="ui-grid-solo">';
        content += '<div class="ui-grid-b">';
        content += '    <div class="ui-block-a"><div class="ui-bar ui-bar-b" style="height:60px"><a href="tel:'+j_user['phone']+'" class="ui-btn ui-btn-inline ui-icon-phone ui-btn-icon-left">Gọi</a></div></div>';
        content += '     <div class="ui-block-b"><div class="ui-bar ui-bar-b" style="height:60px"><a  href="sms:'+j_user['phone']+'" class="ui-btn ui-btn-inline ui-icon-comment ui-btn-icon-left"> SMS </a></div></div>';
        content += '       <div class="ui-block-c"><div class="ui-bar ui-bar-b" style="height:60px"><a href="mailto:'+j_user['email']+'" class="ui-btn ui-btn-inline ui-icon-mail  ui-btn-icon-left"> Email </a></div></div>';
        content += ' </div>';
        content += '    </div>';

        $('#content_detail').append(content);
        $("#slider3").responsiveSlides({
            manualControls: '#slider3-pager',
            maxwidth: 1024
        });
        $.mobile.loading( "hide");
    })

   // });

    $('#popphoto').draggable();




});

function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}
$(document).on('click','.img_item', function(){
    var img_item = $(this).children('img');
    var src = img_item.attr('src');
    var naturalWidth = img_item[0].naturalWidth;
    var naturalHeight = img_item[0].naturalHeight;
    var src = img_item.attr('src');
    $('#popphoto').attr('src',src);
    $('#popphoto').width(naturalWidth);
    $('#popphoto').height(naturalHeight);

    //alert(src);
    $('#popupImg').popup('open',{x:0, y:60});

})
/*
$( "#popupImg-popup" ).mousemove(function( event ) {
    var pos_x = event.pageX;
    var pos_y = event.pageY;
    var photo = $(this).children('#popphoto');
    photo.css('left',pos_x);
    photo.css('top',pos_y);
})
*/
/*
$( document ).on ( "vmousemove", "#popupImg", function(e) {
    var  mouseSide = '';
    if ((e.pageX - this.offsetLeft) < $(this).width() / 2) {
        mouseSide = 'L';
        $('#popphoto').css({'position':'relative', 'left': -(e.pageX-this.offsetLeft) });
    }
    /*} else {
        $('#popphoto').css({'position':'relative', 'left': (e.pageX) });
        mouseSide = 'R';
    }
    console.log(mouseSide);
});*/